<template>
  <div id="app">
    <Header></Header>
    <div class="content-wrapper" v-if="!$route.meta.isNotBreadcrumb">
      <Aside></Aside>
      <div
        class="content"
        :style="{ paddingLeft: isCollapse ? '200px' : '64px' }"
      >
        <!-- <el-breadcrumb
          separator-class="el-icon-arrow-right"
          v-if="breadList.length"
          :style="isBack ? 'padding-left:90px' : ''"
        >
          <el-button
            class="back"
            v-if="isBack"
            type="text"
            size="mini"
            @click="$router.push(formPath)"
            ><i class="el-icon-arrow-left"></i> 返回</el-button
          >
          <el-breadcrumb-item
            :to="item.path"
            v-for="(item, index) in breadList"
            :key="index"
            >{{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb> -->
        <router-view></router-view>
      </div>
    </div>
    <div class="content-main" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { info } from '@/api';
export default {
  components: {
    Header: () => import('./components/Header'),
    Aside: () => import('./components/Aside')
  },
  data() {
    return {
      breadList: [],
      isBack: false,
      formPath: ''
    };
  },
  computed: {
    ...mapGetters({
      isCollapse: 'GET_IS_COLLAPSE'
    })
  },
  watch: {
    $route: {
      handler(to, from) {
        this.breadList = to.meta.routeTree || [];
        this.isBack = to.meta.isBack || false;
        this.formPath = from && (from.fullPath || '');
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.infoFn();
  },
  mounted() {},
  methods: {
    infoFn() {
      info().then((res) => {
        if (res.code == 200) {
          sessionStorage.setItem(
            'platformName',
            res?.data?.appDesc || '职途运营中台'
          );
          this.$store.commit(
            'SET_PLATFORM_NAME',
            res?.data?.appDesc || '职途运营中台'
          );
        }
      });
    }
  }
};
</script>

<style lang="scss">
#app {
  display: flex;
  flex-direction: column;
  background-color: $background_color;

  .content-wrapper {
    display: flex;
    flex: 1;
    padding-top: 54px;

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      // .el-breadcrumb {
      //   position: relative;
      //   padding: 16px 24px;
      //   background: #ffffff;
      //   font-size: 14px;
      //   line-height: 22px;
      //   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);

      //   .back {
      //     position: absolute;
      //     left: 24px;
      //     color: #333333;
      //     top: 50%;
      //     transform: translateY(-50%);
      //   }

      //   .el-breadcrumb__inner {
      //     color: $grey-7;
      //   }

      //   .el-breadcrumb__separator,
      //   .el-breadcrumb__item:last-of-type .el-breadcrumb__inner {
      //     color: $grey-8 !important;
      //   }
      // }
    }
  }

  .content-main {
    padding: 0px;
    height: 100%;
  }

  .vue-office-pdf-wrapper {
    canvas {
      box-shadow: 0 1px 8px -5px rgba(0, 0, 0, 0.5);
      margin-bottom: 16px;
    }
  }
}
</style>
